<template>
	<view class="comment">
		
		<!-- 评价达人 -->
		<view class="seckill-section m-t">
			
			<view class="commentlist">
				<view class="list-item">
					<view class="eva-section">
						<view class="eva-box">
							<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
							<view class="right">
								<text class="name">Leo yo</text>
								<text class="desc">达人</text>
								<text class="desc">资深买家/昆明</text>
								
								<image src="/static/img/6/6-6.png" mode="aspectFit" class="more-r" @click="detail"></image>
								
							</view>
						</view>
						<view class="size">
							<text class="con">自从两年前在严选给儿子买了一双毛毛虫后就在这里越 陷越深了，儿子和侄儿的鞋今后都会在这买，感谢严选 给我省出了大把时间在网购上，在这不用挑来选去，随 便一双鞋都非常满意，质量超好，天天穿，穿到顶脚都还很新。</text>
						</view>
						<view class="image-box">
							<image src="/static/img/1/12.png"></image>
						</view>
					
					</view>
					<view class="option">
						<view class="time">
							1周前
						</view>
						<view class="like">
							<text class="icon-box">
								<image src="/static/img/6/6-7.png" mode="aspectFit"></image>
								<text class="num">7</text>
							</text>
							<text class="icon-box">
								<image src="/static/img/6/6-8.png" mode="aspectFit"></image>
								<text class="num">2</text>
							</text>
						</view>
					</view>
				</view>
				
				
			</view>
			<view class="goods-detail">
				<view class="goods-info">
					<image src="/static/img/1/12.png" mode="aspectFit" class="goods-img"></image>
					<view class="box">
						<text class="name"><text class="tag">热销</text>智利加力果 12个装智利加力果 12个装</text>
						<text class="price">￥33.9/kg <text class="good">95%好评</text></text>
						<text class="freight">全程冷链运输</text>
					</view>
				</view>
				<view class="buy-info">
					<view class="left">购买了：<text>9kg/盒</text></view>
					<view class="right">评价：
						<text>
							<image src="/static/img/3/3-125.png" mode="aspectFill"></image>
							<image src="/static/img/3/3-125.png" mode="aspectFill"></image>
							<image src="/static/img/3/3-125.png" mode="aspectFill"></image>
							<image src="/static/img/3/3-125.png" mode="aspectFill"></image>
							<image src="/static/img/3/3-125.png" mode="aspectFill"></image>
						</text>
					</view>
				</view>
			</view>
			
			<view class="comment-box">
				<view class="title">
					<image src="/static/img/6/6-8.png" mode="aspectFit"></image>
					<text>全部评论</text>
					<text class="num">686</text>
				</view>
				<view class="comment-info">
					<view class="eva-section">
						<view class="eva-box">
							<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
							<view class="right">
								<text class="name">Leo yo</text>
								<view class="desc">
									<view class="size">
										<text class="con">自从两年前在严选给儿子买了一双毛毛虫后就在这里越 陷越深了，儿子和侄儿的鞋今后都会在这买，感谢严选 给我省出了大把时间在网购上，在这不用挑来选去，随 便一双鞋都非常满意，质量超好，天天穿，穿到顶脚都还很新。</text>
									</view>
									<view class="option">
										<view class="time">
											1周前
										</view>
										<view class="like">
											<text class="icon-box">
												<image src="/static/img/6/6-7.png" mode="aspectFit"></image>
												<text class="num">7</text>
											</text>
											<text class="icon-box">
												<image src="/static/img/6/6-8.png" mode="aspectFit"></image>
												<text class="num">2</text>
											</text>
										</view>
									</view>
								</view>
								
								
							</view>
						</view>
					
					</view>
					<view class="eva-section">
						<view class="eva-box">
							<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
							<view class="right">
								<view class="name"><text>花花</text><text>一周前</text></view>
								<view class="desc">
									回复<text class="user">豆豆:</text>
                                :我很喜欢吃猕猴桃 因为它很有营养。

                            
								</view>
								
								
							</view>
						</view>
					
					</view>
					
					<view class="eva-section">
						<view class="eva-box">
							<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
							<view class="right">
								<view class="name"><text>花花</text><text>一周前</text></view>
								<view class="desc">
									回复<text class="user">豆豆:</text>
					            :我很喜欢吃猕猴桃 因为它很有营养。
					
					        
								</view>
								
								
							</view>
						</view>
					
					</view>
					<view class="eva-section">
						<view class="eva-box">
							<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
							<view class="right">
								<view class="name"><text>花花</text><text>一周前</text></view>
								<view class="desc">
									回复<text class="user">豆豆:</text>
					            :我很喜欢吃猕猴桃 因为它很有营养。
					
					        
								</view>
								
								
							</view>
						</view>
					
					</view>
					
					
				</view>
			</view>
			
		</view>
		<!-- 分享 -->
		<share 
			ref="share" 
			:contentHeight="900"
			:shareList="shareList"
		></share>
		
	</view>
</template>

<script>
	import share from '@/components/share';
	export default {
		components: {
			share
		},
		data() {
			return {
				shareList: []
			}
		},
		async onLoad(options){
			
		
			
			
			this.shareList = await this.$api.json('shareList');
		},
		onNavigationBarButtonTap(e) {
			// console.log(e)
			if(e.type === "share"){
				this.$refs.share.toggleMask();
			}
				
		},
		methods:{
			lookall(){
				uni.navigateTo({
					url:`/pages/comment/daren`
				})
			},
			classify(){
				uni.navigateTo({
					url:`/pages/comment/classify`
				})
			},
			detail(){
				uni.navigateTo({
					url:`/pages/comment/detail`
				})
			}
		}


	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.people-list {
		padding: 40upx 29upx;
		background: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			width: 89upx;
			margin-right: 114upx;
			margin-bottom: 29upx;
		

			image {
				width: 89upx;
				height: 89upx;
				border-radius: 50%;
			}

			text {
				font-size: 20upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				display: block;
				width: 100%;
				text-align: center;
			}
		}

		:nth-child(4n) {
			margin-right: 0;
		}
	}

	.closeall {
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 73upx;
		font-size: 20upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		border-top: 3upx solid #F5F5F5;

		.icon-shang {
			color: #4DC897;
		}
	}



	/* 评价达人 */
	.seckill-section {
		
		margin-top: 21upx;
		.item{
			padding: 4upx 30upx 24upx;
				background: #fff;
		}
		.s-header {
			display: flex;
			align-items: center;
			height: 92upx;
			line-height: 1;
			justify-content: space-between;
			border-bottom: 2upx solid #F5F5F5;

			.title {
				font-size: 25upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(68, 68, 68, 1);
			}

			.look {
				font-size: 23upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(198, 198, 198, 1);
			}

		}

		.floor-list {
			white-space: nowrap;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			width: 242upx;
			// height: 268upx;
			position: relative;
			text-align: center;
			padding: 20upx 51upx;
			border-right: 1px solid #F5F5F5;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			line-height: 1.8;

			image {
				width: 82upx;
				height: 82upx;
				background: rgba(255, 255, 255, 1);
				border-radius: 50%;
				display: block;

			}

			.name {
				text-align: center;
				display: block;
				font-size: 20upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

			.fans {
				text-align: center;
				display: block;
				font-size: 17upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
			}

			.watch {
				text-align: center;
				width: 61upx;
				height: 26upx;
				background: rgba(77, 200, 151, 1);
				border-radius: 10upx;
				font-size: 17upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				display: flex;
				justify-content: center;
				align-items: center;
			}

		}
	}
	.item{
		margin-bottom: 18upx;
	}
	.commentlist{
		background: #F5F5F5;
		
		.title{
			font-size:21upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(102,102,102,1);
			display: block;
			width: 100%;
			background: #fff;
			padding: 26upx;
			text-align: center;
			margin-top: 18upx;
		}
		.header{
			background: #fff;
			font-size:21upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color: #666;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2upx solid #F5F5F5;
			padding: 0 45upx;
			text{
				display: block;
				width:259upx;
				height:35upx;
				padding-bottom: 13upx;
				text-align: center;
				
			}
			.active{
				border-bottom: 2upx solid #4DC897;
				color:rgba(77,200,151,1);
			}
		}
		.list-item{
			margin-bottom: 10upx;
		}
		.eva-section{
			display: flex;
			flex-direction: column;
			padding: 20upx 0;
			background: #fff;
			// margin-bottom: 16upx;
			clear: both;
			.space{
				background: $page-color-base;
				height: 20upx;
			}
			.e-header{
				display: flex;
				align-items: center;
				margin-top: 23upx;
				.tit{
					padding: 15upx 18upx;
					font-size:23upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(102,102,102,1);
					background:rgba(255,255,255,1);
					border:1upx solid rgba(153, 153, 153, 1);
					border-radius:28upx;
					display: inline-flex;
					justify-content: center;
					align-items: center;
				}
				.active{
					border:1upx solid rgba(77, 200, 151, 1);
					color:rgba(77,200,151,1);
				}
				.level{
					width:100upx;
					height:55upx;
					background:rgba(255,255,255,1);
					border:1upx solid rgba(153, 153, 153, 1);
					border-radius:28upx;
					font-size:23upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(102,102,102,1);
					display: inline-flex;
					justify-content: center;
					align-items: center;
					margin-left: 43upx;
				}
				
				.icon-you{
					margin-left: 10upx;
				}
			}
			.star-show{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size:25upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(102,102,102,1);
				.uni-rate{
					margin: 5upx 20upx 0 20upx;
				}
				
			}
			
			.eva-box{
				display: flex;
				padding: 0 30upx;
				border-bottom: 1upx solid #f5f5f5;
				padding-bottom: 41upx;
				.portrait{
					flex-shrink: 0;
					width: 114upx;
					height: 114upx;
					border-radius: 50%;
				}
				.right{
					flex: 1;
					// display: flex;
					/* flex-direction: column; */
					font-size:25upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(102,102,102,1);
				
					padding-left: 15upx;
					align-items: center;
					position: relative;
					.name{
						display: block;
						line-height:50upx;
					}
					.desc{
						display: block;
						font-size:23upx;
						font-family:Microsoft YaHei;
						font-weight:400;
						color:rgba(153,153,153,1);
						// line-height:84upx;
					}
					.more-r{
						position: absolute;
						right: 0;
						top: 20%;
						width:26upx;
						height:6upx;
					}
				}
				
			}
			
			
			.size{
				padding: 32upx 21upx;
				.con{
					font-size:23upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(102,102,102,1);
					line-height:1;
				}
			
			}
			
			.image-box{
				margin-top: 20upx;
				padding: 0 21upx;
				
				image{
					width:100%;
					height:372upx;
					margin-right: 11upx;
					
				}
				
			}
			
						
		}
		.option{
			width:100%;
			height:77upx;
			background:rgba(255,255,255,1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 2upx solid #F5F5F5;
			padding: 0 24upx;

			.time{
				font-size:23upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(102,102,102,1);
			}
			.like{
				font-size:23upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(181,181,181,1);
				.icon-box{
					margin-right: 50upx;
				}
				image{
					width:33upx;
					height:31upx;
					margin-right: 10upx;
				}
			}
		}
	}
	
	.goods-detail{
		padding: 38upx 0;
		background: #fff;
		margin-bottom: 16upx;
		.goods-info{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 38upx;
			.goods-img{
				width:215upx;
				height:215upx;
				margin-right: 56upx;
			}
			.name{
				font-size:27upx;
				font-family:Microsoft YaHei;
				font-weight:bold;
				color:rgba(51,51,51,1);
				.tag{
					width:57upx;
					height:34upx;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					font-size:22upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(255,255,255,1);
					margin-right: 3upx;
					background: #F0406F;
					border-radius: 5upx;
				}
			}
			.price{
				display: block;
				font-size:32upx;
				font-family:Microsoft YaHei;
				font-weight:bold;
				color:rgba(240,64,111,1);
				.good{
					font-size:19upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(136,136,136,1);
					margin-left: 10upx;
				}
			}
			.freight{
				font-size:26upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(153,153,153,1);
			}
			
		}
		.buy-info{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 38upx;
			border-top: 2upx solid #f5f5f5;
			height: 85upx;
			.left{
				font-size:25upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:#999;
				text{
					color: #666;
				}
			}
			.right{
				font-size:32upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(153,153,153,1);
				image{
					width:29upx;
					height:27upx;
					margin-right: 11upx;
					display: inline-block;
				}
			}
		}
	}
	.comment-box{
		background: #fff;
		.title{
			font-size:28upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(153,153,153,1);
			height: 102upx;
			padding: 33upx 21upx;
			border-bottom: 2upx solid #f5f5f5;
			display: flex;
			align-items: center;
			image{
				width: 33upx;
				height: 31upx;
				display: inline-block;
				margin-right: 9upx;
			}
			.num{
				font-size:23upx;
				margin-left: 22upx;
			}
		}
		.comment-info{
				.eva-section{
					display: flex;
					flex-direction: column;
					padding: 20upx 30upx;
					background: #fff;
					// margin-bottom: 16upx;
					clear: both;
					padding-left: 63upx;
					border-bottom: 2upx solid #f5f5f5;
					.space{
						background: $page-color-base;
						height: 20upx;
					}
					.e-header{
						display: flex;
						align-items: center;
						margin-top: 23upx;
						.tit{
							padding: 15upx 18upx;
							font-size:23upx;
							font-family:Microsoft YaHei;
							font-weight:400;
							color:rgba(102,102,102,1);
							background:rgba(255,255,255,1);
							border:1upx solid rgba(153, 153, 153, 1);
							border-radius:28upx;
							display: inline-flex;
							justify-content: center;
							align-items: center;
						}
						.active{
							border:1upx solid rgba(77, 200, 151, 1);
							color:rgba(77,200,151,1);
						}
						.level{
							width:100upx;
							height:55upx;
							background:rgba(255,255,255,1);
							border:1upx solid rgba(153, 153, 153, 1);
							border-radius:28upx;
							font-size:23upx;
							font-family:Microsoft YaHei;
							font-weight:400;
							color:rgba(102,102,102,1);
							display: inline-flex;
							justify-content: center;
							align-items: center;
							margin-left: 43upx;
						}
						
						.icon-you{
							margin-left: 10upx;
						}
					}
					.star-show{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-size:25upx;
						font-family:Microsoft YaHei;
						font-weight:400;
						color:rgba(102,102,102,1);
						.uni-rate{
							margin: 5upx 20upx 0 20upx;
						}
						
					}
					
					.eva-box{
						display: flex;
						padding: 20upx 0;
						.portrait{
							flex-shrink: 0;
							width: 72upx;
							height: 72upx;
							border-radius: 50%;
						}
						.right{
							flex: 1;
							// display: flex;
							/* flex-direction: column; */
							font-size:25upx;
							font-family:Microsoft YaHei;
							font-weight:400;
							color:rgba(102,102,102,1);
						
							padding-left: 19upx;
							align-items: center;
							.name{
								display: flex;
								justify-content: space-between;
								line-height:50upx;
								width: 100%;
								text{
									&:last-child{
										font-size:23upx;
										font-family:Microsoft YaHei;
										font-weight:400;
										color:rgba(181,181,181,1);
									}
								}
							}
							.desc{
								display: block;
								font-size:23upx;
								font-family:Microsoft YaHei;
								font-weight:400;
								color:rgba(102,102,102,1);
								// line-height:84upx;
								.user{
									color: #4DC897;
								}
							}
							
							.more-r{
								position: absolute;
								right: 0;
								top: 50%;
								width:26upx;
								height:6upx;
							}
						}
						
					}
					
					
					.size{
						.con{
							font-size:23upx;
							font-family:Microsoft YaHei;
							font-weight:400;
							color:rgba(102,102,102,1);
							line-height:1;
						}
					
					}
					
					
								
				}
				.option{
					width:100%;
					height:77upx;
					background:rgba(255,255,255,1);
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-top: 2upx solid #F5F5F5;
			
					.time{
						font-size:23upx;
						font-family:Microsoft YaHei;
						font-weight:400;
						color:rgba(102,102,102,1);
					}
					.like{
						font-size:23upx;
						font-family:Microsoft YaHei;
						font-weight:400;
						color:rgba(181,181,181,1);
						.icon-box{
							margin-right: 50upx;
						}
						image{
							width:33upx;
							height:31upx;
							margin-right: 10upx;
						}
					}
				}
			
		}
	}
</style>
